import React from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Table, Pagination, Popconfirm, Button, Card, Radio, Input } from 'antd';
import { routerRedux } from 'dva/router';
import { Modal } from '../../components';
import moment from 'moment'
;

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

const columns = {
  wm: [
    { title: '用户ID', dataIndex: 'id', key: 'id', className: 'tdHeight' },
    { title: '维码器ID', dataIndex: 'minor_id' },
    { title: '余额', dataIndex: 'balance', render: text => (`￥${(text / 100).toFixed(2)}`), sorter: (a, b) => a.balance - b.balance },
    {
      title: '余额支付',
      dataIndex: 'is_balance',
      render: text => (text == 1 ? '开通' : '未开通'),
      filters: [
        { text: '开通', value: 1 },
        { text: '未开通', value: 0 },
      ],
      onFilter: (value, record) => record.is_balance == value,
    },
    { title: '访问次数', dataIndex: 'visit_count', sorter: (a, b) => a.visit_count - b.visit_count },
    { title: '最后登录时间', dataIndex: 'last_time', render: text => (moment(text).format('YYYY-MM-DD hh:mm:ss')), sorter: (a, b) => new Date(a.last_time).getTime() - new Date(b.last_time).getTime() },
    { title: '注册时间', dataIndex: 'reg_time', render: text => (moment(text).format('YYYY-MM-DD hh:mm:ss')), sorter: (a, b) => new Date(a.last_time).getTime() - new Date(b.last_time).getTime() },
    {
      title: '详情',
      key: 'operation',
      render: (text, record) => {
        const url = `/UserMsg/UserHistory/${record.id}`;
        return (<Link to={url}>点我</Link>);
      },
    },
  ],
  wx: [
    { title: '用户ID', dataIndex: 'id', className: 'tdHeight' },
    { title: '头像', dataIndex: 'headimgurl', render: (text => (<img style={{ width: '35px' }} src={text} />)) },
    { title: '昵称', dataIndex: 'nickname', render: text => (decodeURI(text)) },
    {
      title: '性别',
      dataIndex: 'sex',
      render: (text) => {
        switch (text) {
          case 1: return '男';
            break;
          case 2: return '女';
            break;
          default:
            return '未知';
        }
      },
      filters: [
        { text: '男', value: 1 },
        { text: '女', value: 2 },
        { text: '未知', value: 0 },
      ],
      onFilter: (value, record) => record.sex == value,
    },
    { title: '省份', dataIndex: 'province' },
    { title: '城市', dataIndex: 'city' },
    { title: '访问次数', dataIndex: 'visit_count', sorter: (a, b) => a.visit_count - b.visit_count },
    { title: '最后登录时间', dataIndex: 'last_time', render: text => (moment(text).format('YYYY-MM-DD hh:mm:ss')), sorter: (a, b) => new Date(a.last_time).getTime() - new Date(b.last_time).getTime() },
    { title: '注册时间', dataIndex: 'reg_time', render: text => (moment(text).format('YYYY-MM-DD hh:mm:ss')), sorter: (a, b) => new Date(a.last_time).getTime() - new Date(b.last_time).getTime() },
    {
      title: '操作',
      key: 'operation',
      render: (text, record) => {
        const url = `/UserMsg/UserHistory/${record.id}`;
        return (<Link to={url}>点我</Link>);
      },
    },
  ],
};

class UserMsg extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      value: 'wx',

    };
  }
  table_onChange = (pagination, filters, sorter) => {
    console.log('params', pagination, filters, sorter);
  }

  radio_onChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  }

  render() {
    const data = this.props[this.state.value];
    return (
      <Card bodyStyle={{ margin: 0 }}>
        <RadioGroup defaultValue="wx" size="large" style={{ marginBottom: 20 }} onChange={this.radio_onChange}>
          <RadioButton value="wm">唯码器</RadioButton>
          <RadioButton value="wx">微信</RadioButton>
        </RadioGroup>
        <Table rowKey={record => record.id} columns={columns[this.state.value]} onChange={this.table_onChange} dataSource={data} bordered loading={this.props.loading} />
      </Card>
    );
  }

}


function mapStateToProps(state) {
  const loading = state.loading.models.userMsg;
  return { ...state.userMsg, loading };
}
UserMsg.propTypes = {
};
export default connect(mapStateToProps)(UserMsg);
